<template>
  <div class="recmmend-root">
    <ul>
      <li v-for="(item, index) in proList" :key="index">
        <img :src="item.proIcon" />
        <p class="pro-name">
          {{ item.proTitle.substring(0, 20) }}
        </p>
        <span class="pro-peice">
          <span class="new-price"><i>￥</i>{{ item.proPrice }}</span>
        </span>
      </li>
    </ul>
    <div style="text-align: center">
      <h1 style="font-weight: 800">
        申请记录
        <a-tooltip placement="bottom">
          <template #title>
            <span>点击刷新</span>
          </template>
          <a-button type="primary" shape="circle" @click="getApplyLsit">
            <template #icon><RedoOutlined /></template>
          </a-button>
        </a-tooltip>
      </h1>
    </div>
    <a-table
      :columns="columns2"
      :data-source="data"
      bordered
      ellipsis
      style="margin-top: 10px"
      :pagination="false"
      rowKey="recId"
    >
      <template #postion="{ record }">
        {{ "位置" + record.postion }}
      </template>
      <template #state="{ record }">
        <a-tag v-if="record.state == 0" color="orange">待审核</a-tag>
        <a-tag v-if="record.state == 1" color="red">未通过</a-tag>
        <a-tag v-if="record.state == 2" color="green">展示中</a-tag>
        <a-tag v-if="record.state == 3" color="blue">已下架</a-tag>
      </template>
      <template #action="{ record }">
        <a-space v-if="record.state == 0">
          <a-button type="primary" @click="byApply(record)">通过</a-button>
          <a-button type="danger" @click="refApply(record)">拒绝</a-button>
        </a-space>
        <template v-if="record.state != 0">
          <i>操作人:{{ record.adminId }}</i
          ><br />
          <i>时间:{{ record.opreaTime }}</i>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
const columns2 = [
  {
    title: "商品id",
    dataIndex: "proId",
    key: "proId",
    align: "center",
  },
  {
    title: "申请位置",
    dataIndex: "postion",
    key: "postion",
    align: "center",
    slots: { customRender: "postion" },
  },

  {
    title: "申请时间",
    dataIndex: "applyTime",
    key: "applyTime",
    align: "center",
  },
  {
    title: "当前状态",
    key: "state",
    dataIndex: "state",
    align: "center",
    slots: { customRender: "state" },
  },
  {
    title: "申请理由",
    key: "reason",
    dataIndex: "reason",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];
import { message } from "ant-design-vue";
import { RedoOutlined } from "@ant-design/icons-vue";
export default {
  components: {
    RedoOutlined,
  },
  data() {
    return {
      data,
      columns2,
      proList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.getApplyLsit();
    },

    getApplyLsit() {
      this.$axios.get("admin/recommendApply/applyList").then((res) => {
        if (res.data.code == 2000) {
          this.data = res.data.data;
          this.getProList();
          message.success("数据刷新成功");
        } else {
          message.error("数据刷新失败");
        }
      });
    },
    getProList() {
      this.$axios.get("common/recommend/getRecPro").then((res) => {
        if (res.data.code == 2000) {
          this.proList = res.data.data;
        } else {
        }
      });
    },
    byApply(item) {
      console.log(item);
      this.$axios
        .get("admin/recommendApply/byApply?id=" + item.recId)
        .then((res) => {
          if (res.data.code == 2000) {
            this.getApplyLsit();

            message.success("提交成功");
          } else {
            message.error("提交失败");
          }
        });
    },
    refApply(item) {
      this.$axios
        .get("admin/recommendApply/refApply?id=" + item.recId)
        .then((res) => {
          if (res.data.code == 2000) {
            this.getApplyLsit();
            message.success("提交成功");
          } else {
            message.error("提交失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.recmmend-root {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.recmmend-root ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.recmmend-root ul li {
  position: relative;
  width: 234px;
  text-align: center;
  background-color: #fff;
  transition: all 0.2s linear;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.recmmend-root ul li:hover {
  transform: translate3d(0, 2px, 0);
  box-shadow: none;
}
.recmmend-root ul li img {
  width: 185px;
  height: 185px;
}
.recmmend-root ul li .pro-name {
  width: 135px;
  height: 40px;
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 20px;
  overflow: hidden;
  margin: 8px auto;
}
.recmmend-root ul li .pro-peice i {
  font-size: 14px;
  line-height: 20px;
}
.recmmend-root ul li .pro-peice .old-price {
  text-decoration: line-through;
  color: #aaa;
  font-size: 14px;
}
.recmmend-root ul li .pro-peice .new-price {
  margin-left: 6px;
  color: red;
  font-size: 22px;
}
.recmmend-root ul li .option > span {
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
  cursor: pointer;
}
.recmmend-root ul li .option > span:hover {
  color: #1890ff;
}
</style>